<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>执法监管系统</title>
	<script src="js/header.js"></script>
	<style>
		html, body, #App{
			padding: 0px;
			margin: 0px;
			height: 100%;
			font-size: 14px;
			font-family: "微软雅黑";
		}
		.el-header {
			background-image:url("images/header.png");
			background-repeat: no-repeat;
			background-size: cover;
			height: 100px!important;
			position: relative;
		}
		/*.el-header .el-row{
            position: absolute;
            bottom: 0;
            right: 0;
            margin: 10px 0;
        }*/
		.el-header .el-row{
			float: right;
			padding: 5px 30px;
			margin-right: 30px;
			margin-top: 25px;
			text-align: center;
			color: #fff;
		}
		.login_name{
			padding: 5px;
			background: rgba(255,255,255,.2);
			border-radius: 30px;
			font-size: 16px;
		}
		.tuichu>button.el-button.is-round{
			padding: 6px 15px;
			font-size: 16px;
			font-family: "黑体";
		}
		/*左侧菜单字体*/
		.el-menu span{
			font-family: "微软雅黑";
			font-size: 16px;
		}
		.el-main{
			margin: 0;
			padding: 0;
			overflow: auto;
		}
		.el-main>div{
			background-color: #fff;
			width: 100%;
			height: 100%;
			/*min-width: 1200px;*/
			color: white;
			text-align: center;
			padding: 0px;
		}
		.height100percent {
			height: 100%;
			overflow: hidden;
		}
		.main-menu {
			height: 100%;
			font-weight: 300;
		}
		.main-menu:not(.el-menu--collapse) {
			min-width: 260px;
			max-width: 390px;
		}
		.el-main{
			overflow: hidden;
			/*overflow: visible;*/
		}
		.main-tabs {
			height: 100%;
			border: 0px;
			overflow: auto;
		}
		.el-menu-item{
			padding-left: 0;
			font-weight:normal;
		}
		.el-submenu__title{
			font-weight:normal ;
		}
		.headMenu{
			border-radius: 10px;
			font-size: 10px;
			margin-top: 1px;
			padding: 5px;
		}
		/*.el-tabs__content, .el-tab-pane{
			padding: 0!important;
			margin: 0!important;
			height: 100%;
		}*/
		.el-tabs__content{
			width: 100%;
			height: 95%;
			box-sizing: border-box;
			/*overflow: auto!important;*/
		}
		.el-tabs__content>div{
			height: 100%;
			background: #FFFFFF;
			border: 1px solid #C0CCDA;
			box-shadow: 0 2px 4px 0 rgba(208,208,208,0.50);
			border-radius: 4px;
		}
		.el-tabs__content::-webkit-scrollbar, .main-tabs::-webkit-scrollbar{
			width: 0!important;
		}
		.search {
			text-align: center;
		}
		.legalName:hover{
			color:#409EFF;
			cursor: pointer;
		}
		.text {
			font-size: 14px;
		}

		.item {
			margin-bottom: 18px;
		}
		.el-tabs__nav-next, .el-tabs__nav-prev {
			position: absolute;
			cursor: pointer;
			line-height: 40px;
			font-size: 12px;
			color: #909399;
		}
		#App .el-menu-item i{
			color: #000;
		}
		#index{
			background: url(./images/bg.png) no-repeat;
			background-size: cover;
		}
		#tabsIframe{
			background: url(./images/bg.png) no-repeat;
			background-size: cover;
		}
	</style>
</head>
<body>
<div v-cloak id="App">
	<div id="modal" v-show="shade" style="position: absolute;top: 0;right: 0;left: 0;bottom: 0;background: transparent;z-index: 9;"></div>
	<el-container class="height100percent">
		<el-header class="el-header">
			<el-row>
				<el-col class="login_name" :span="20">
					<span>欢迎您！{{ userName }}</span>
				</el-col>
				<el-col class="tuichu" :span="3" :offset="1">
					<el-button round @click="logoutSystem">退出</el-button>
				</el-col>
			</el-row>
		</el-header>
		<el-container class="height100percent">
			<el-menu :default-active="activeIndex" @open="handleOpen" @close="handleClose" :unique-opened="true" background-color="#e7f0ff"
					 text-color="black" text-color-weight="500" active-text-color="#008cff" :collapse="isCollapse" :collapse-transition="true" class="main-menu">
				<div class="el-submenu__title" style="padding-left: 20px;height: 39px;color: black;border-bottom: 1px solid #E4E7ED;background-color: #f5f7fa;" @click="isCollapse = !isCollapse;">
					<i v-if="isCollapse == false" class="el-submenu__icon-arrow el-icon-arrow-left"></i>
					<i v-else class="el-submenu__icon-arrow el-icon-arrow-right" style="right: 27px;"></i>
				</div>
				<template v-for="item in menulist">
					<el-submenu v-if="item.children && item.children.length" :index="item.id" :key="item.id">
						<template slot="title">
							<i :class="item.iconCls"></i>
							<span>{{item.text}}</span>
						</template>
						<template v-for="itemChild in item.children">
							<el-submenu v-if="itemChild.children && itemChild.children.length" :index="itemChild.id" :key="itemChild.id">
								<template slot="title">
									<i :class="itemChild.iconCls"></i>
									<span>{{itemChild.text}}</span>
								</template>
								<el-menu-item v-for="itemChild_Child in itemChild.children" :index="itemChild_Child.id" :key="itemChild_Child.id" @click="addTab(itemChild_Child)">
									<i :class="itemChild_Child.iconCls"></i>
									<span slot="title">{{itemChild_Child.text}}</span>
								</el-menu-item>
							</el-submenu>
							<el-menu-item v-else :index="itemChild.id" :key="itemChild.id" @click="addTab(itemChild)">
								<i :class="itemChild.iconCls"></i>
								<span slot="title">{{itemChild.text}}</span>
							</el-menu-item>
						</template>
					</el-submenu>
					<el-menu-item v-else :index="item.id" :key="item.id" @click="addTab(item)">
						<i :class="item.iconCls"></i>
						<span slot="title">{{item.text}}</span>
					</el-menu-item>
				</template>
				<!--<el-row>
					<el-col v-for="item in data" @contextmenu.prevent.native="tabsClick(item)">
						<el-dropdown trigger="click" :ref="`work_flow_${item.name}`">
							&lt;!&ndash;展示的内容&ndash;&gt;
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item @click.native="edit" ></el-dropdown-item>
								<el-dropdown-item @click.native="add" ></el-dropdown-item>
							</el-dropdown-menu >
						</el-dropdown>
					</el-col>
				</el-row>-->
			</el-menu>
			<el-main>
				<el-tabs type="border-card" class="main-tabs" v-model="selectTabName" @tab-remove="mainTabsRemoveTab">
					<el-tab-pane :name="firstPageName">
						<span slot="label"><i class="el-icon-date"></i>首页</span>
						<iframe v-if="showfirstpage"  frameborder="0" width="100%" id="index" src="html/sy.html" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
					</el-tab-pane>
					<el-tab-pane closable v-for="(item, index) in mainTabs" :key="item.id" :name="item.name" :label="item.title" @click="menuVisible = false">
						<span slot="label" @contextmenu.prevent="tabsClick(item.title,item.content,$event)"><i class="el-icon-s-tools"></i>{{item.title}}</span>
						<iframe frameborder="0" :src="item.content" :ref="item.content" id="tabsIframe" width="100%" v-loading.body.lock="bodyscreenLoading" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
					</el-tab-pane>
				</el-tabs>
			</el-main>
			<el-row v-show="menuVisible" style="position: absolute;" :style="{ top: topSize+'px',left: leftSize+'px' }">
				<el-col>
					<ul class="el-dropdown-menu el-popper" id="dropdown-menu-2334"  v-show="menuVisible" style="position: relative;">
						<li tabindex="-1" class="el-dropdown-menu__item" v-for="item in dropDown" @click="closeTab(item.name)">{{ item.name }}</li>
					</ul>
				</el-col>
			</el-row>
		</el-container>
	</el-container>
</div>
<script>
    var vue = new Vue({
        el: '#App',
        created: function () {
        	this.getUser();
           /* var userInfo = JSON.parse(localStorage.getItem('userInfo'));
            this.userName = userInfo.loginName;*/
            /*var USER_AGENT = navigator.userAgent.toLowerCase();
            var isChrome = /.*(chrome)\/([\w.]+).*!/;
            alert(!isChrome.test(USER_AGENT));*/
        },
        mounted: function () {
            this.getMenu();
            this.checkUrl();
            document.getElementById("modal").addEventListener("click",this.closeMenu);
        },
        updated: function(){

        },
		beforeDestroy: function (){
            // 移除监听
            document.getElementById("modal").removeEventListener("click",this.closeMenu);
        },
        data: function () {
            return {
                userName: '',
                collapseBtnClick: false,
                isCollapse: false, // 菜单折叠和展开
                activeIndex: 'firstPage', // 左侧菜单被选项
                selectTabName: 'firstPage',
                firstPageName: 'firstPage',
                supReconsider: false, //智能辅助复议对话框弹窗
                searchForm: '',
                shade:false,
                mainTabs: [],
                posts: [
                    { id: 1, title: 'My journey with Vue' },
                    { id: 2, title: 'Blogging with Vue' },
                    { id: 3, title: 'Why Vue is so fun',content:'111' }
                ],
                menulist:[],
                showfirstpage: false,
                menuVisible: false,
                topSize: 0,
                leftSize: 0,
                selectTitle: '', // 选中的menu标题
                dropDown: [
                    { name: '刷新标签页' },
                    { name: '关闭标签页' },
                    { name: '关闭其他标签页' },
                    { name: '关闭全部标签页' },
                    { name: '关闭右侧标签页' },
                    { name: '关闭左侧标签页' }
                ],
                bodyscreenLoading: false,
                messageList: [
                    {
                        id: '',
                        text: '认领超时提醒',
                        url: '',
                        index: '',
                        show: false
                    }
                ],
                messageLists: [
                    {
                        id: '',
                        text: '未认领任务量超限提醒',
                        url: '',
                        index: '',
                        show: false
                    }
                ],
            }
        },
        methods: {
            checkUrl(){
                var $this = this;
                // 获取参数
                let url = window.location.search; // ?u=1
                var requestId;
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    var strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        requestId = unescape(strs[i].split("=")[1]);
                        localStorage.setItem('changeUrl',requestId); // 参数 1
                    }
                }

                var getUrl_setTimeout = setTimeout(function(){
                    var get_url = localStorage.getItem('changeUrl');
                    if(get_url != ''){
                        // 地址去除参数
                        localStorage.setItem('params',get_url);
                        localStorage.setItem('changeUrl','');
                        location.href = 'index.html';
                    }else{
                        $this.showFastBtn();
                        clearInterval(getUrl_setTimeout); // 清理定时器
                    }
                },1000)
            },
            showFastBtn(){
                var menulist = JSON.parse(localStorage.getItem("menuList"));
				var  type = JSON.parse(localStorage.getItem("params"));
				if(type==1){
                    var messageList = this.messageList;
				}else if(type==2){
                    var messageList = this.messageLists;
				}else if(type==0){

				}
                // 遍历--匹配
                for (var i=0; i<messageList.length; i++) {
                    var ftxt = messageList[i].text;
                    for (var j=0; j<menulist.length; j++) {
                        if (ftxt == menulist[j].text) {
                            messageList[i].show = true;
                            messageList[i].id = menulist[j].id; // 添加id
                            messageList[i].url = menulist[j].url; // 添加url
                            this.addTab(messageList[i]);
                            break;
                        }
                    }
                }
            },
            getMenu:function(){
                axios.get(appBaseUrl + "/menu/getMenu").then(response =>{
                    let da=JSON.parse(response.data.data);
                this.menulist=da.result;
                console.log(response.data);
                localStorage.setItem("menuList", JSON.stringify(response.data.fastBtn));
                this.showfirstpage = true;
            })
            },
            addTab:function(menu) {
                // console.log(menu);
                var exist = false;
                for (var i = 0; i < this.mainTabs.length; i++) {
                    if (menu.id == this.mainTabs[i].id) {
                        exist = true;
                        break;
                    }
                }
                if(!exist){
                    this.mainTabs.push({
                        id: menu.id,
                        title: menu.text,
                        name: menu.text,
                        content: menu.url
                    });
                }
                this.selectTabName = menu.text;
                this.activeIndex = menu.id;
            },
            Tindex: function(){
                location.href="";
            },
            collapseStatus: function() {
                this.collapseBtnClick = this.isCollapse;
                this.isCollapse = !this.isCollapse;
            },
            /*handleOpen: function (key, keyPath) {
//              console.log(key, keyPath);
				// 一级无子菜单不支持点击事件
//				console.log(this.menulist[key-1].hasOwnProperty("url"))
				if(this.menulist[key-1].hasOwnProperty("url")){
					var menu=this.menulist[key-1]
					this.addTab(menu)
				}
                if (this.collapseBtnClick) return;
                        this.isCollapse = false;
            },
            handleClose: function (key, keyPath) {
                console.log(key, keyPath);
                if (this.collapseBtnClick) return;
                        this.isCollapse = true;
            },*/
            mainTabsClick: function (tab, event) {
            },
            mainTabsAddTab: function (targetName) {
                var newTabName = this.mainTabs.length + '';
                var tab = {
                    title: "tab页面" + newTabName,
                    name: newTabName,
                    src: ""
                }
                this.mainTabs.push(tab);
                this.selectTabName = newTabName;
            },
            mainTabsRemoveTab: function (targetName) {
                var tabs = this.mainTabs;
                var activeName = this.selectTabName;
                var activeIndex = this.activeIndex;
                var firstPageName = this.firstPageName;
                if (activeName === targetName) {
                    tabs.forEach(function(tab,index){
                        if (tab.name === targetName) {
                            var nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                                activeIndex = nextTab.id;
                            } else {
                                activeName = firstPageName;
                                activeIndex = firstPageName;
                            }
                        }
                    });
                }
                this.selectTabName = activeName;
                this.activeIndex = activeIndex;
                this.mainTabs = tabs.filter(function(tab){
                    return tab.name!==targetName;
                });
            },
            mainTabsRemoveOtherTab: function (targetName,n) {
                var tabs = this.mainTabs; // 所有tab页
                var activeName = this.selectTabName; // 被选中的tab页
                var activeIndex = this.activeIndex;
                var firstPageName = this.firstPageName; // 首页name
                var otherName = []; // 存最后结果
                var nextTab; // 备选
                var activeIndex; // 选择元素的索引
                // 获取被选元素索引
                tabs.forEach(function(tab,index){
                    if(targetName == tab.name){
                        activeIndex = index;
                    }
                })
                console.log(activeIndex);
                // 遍历所有tab页
                tabs.forEach(function(tab,index){
                    if(n == -1){
                        // 关闭左侧
                        if(index >= activeIndex){
                            otherName.push(tabs[index]);
                            nextTab = tabs[activeIndex];
                        }
                    }else if(n == 0){
                        // 关闭其他
                        if(index == activeIndex){
                            otherName.push(tabs[index]);
                            nextTab = tabs[index];
                        }
                    }else if(n == 1){
                        // 关闭右侧
                        if(index <= activeIndex){
                            otherName.push(tabs[index]);
                            nextTab = tabs[activeIndex];
                        }
                    }else{
                        // 关闭全部
                        otherName = [];
                    }
                })

                if (nextTab) {
                    activeName = nextTab.name;
                    activeIndex = nextTab.id;
                } else {
                    activeName = firstPageName;
                    activeIndex = firstPageName;
                }
                this.selectTabName = activeName;
                this.activeIndex = activeIndex;
                this.mainTabs = otherName;
                otherName = '';
            },
            znfy: function(){
                this.supReconsider = true;
            },
            logoutSystem: function(){
                axios({
                    method: 'post',
                    url: appBaseUrl + '/login/logout',
                })
                    .then(response => {
                    let data = response.data;
                if(data.code == 200) {
                    localStorage.clear();
                    //location.href = location.origin + appBaseUrl + '/html/login.html';
                    location.href = mainWorkUrl+ '/html/login.html';
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(function(error) {
                    console.log(error);
                });
            },
            tabsClick(title,con,e){
                //显示menu菜单
                this.shade = true;
                this.menuVisible = true;
                this.selectTitle = title;
                localStorage.setItem('refresh',con);
                this.topSize = e.pageY;
                this.leftSize = e.pageX;
            },
            //关闭选项卡功能    注意：还需要上面的 .tabs和.menu右击触发事件显示菜单功能哦
            closeTab(text) {
                let title = this.selectTitle;
                console.log(title);
                if(text == '刷新标签页'){
                    var tabframe = localStorage.getItem('refresh');
                    this.bodyscreenLoading = true;
                    this.shade = false;
                    var src = this.$refs[tabframe][0].src;
                    this.$refs[tabframe][0].src = '';
                    setTimeout(() => {
                        this.$refs[tabframe][0].src = src;
						this.bodyscreenLoading = false;
					}, 1000);
                }else if(text == '关闭标签页'){
                    this.mainTabsRemoveTab(title);
                    this.shade = false;
                }else if(text == '关闭全部标签页') {
                    this.mainTabsRemoveOtherTab(title);
                    this.shade = false;
                }else if(text == '关闭其他标签页') {
                    this.mainTabsRemoveOtherTab(title,0);
                    this.shade = false;
                }else if(text == '关闭右侧标签页') {
                    this.mainTabsRemoveOtherTab(title,1);
                    this.shade = false;
                }else if(text == '关闭左侧标签页') {
                    this.mainTabsRemoveOtherTab(title,-1);
                    this.shade = false;
                }

                this.menuVisible = false;
            },
            closeMenu(e){
            	this.shade = false;
                this.menuVisible = false;
                this.$emit("close",false)
            },
			getUser(){
				axios({
					method: 'get',
					url: appBaseUrl + '/user/getuser',
				})
						.then(response => {
					let data = response.data;
				if(data.code == 200) {
					localStorage.setItem("userInfo", JSON.stringify(data.data));
					this.userName=JSON.parse(localStorage.getItem('userInfo')).loginName;
				} else {
					this.$message.error(data.msg);
				}
			})
			.catch(function(error) {
					console.log(error);
				});
			},
        }
    })
</script>
</body>
</html>